<template>
  <div class="cart-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">购物车</h1>
      <p class="page-subtitle">查看和管理您的商品</p>
    </div>

    <!-- 购物车内容 -->
    <div class="cart-content" v-if="cartItems.length > 0">
      <el-table :data="cartItems" style="width: 100%">
        <el-table-column label="商品信息">
          <template #default="scope">
            <div class="product-info">
              <el-image
                :src="scope.row.product.coverImage"
                class="product-image"
                fit="cover"
              >
                <template #error>
                  <div class="image-error-placeholder">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </template>
              </el-image>
              <div class="product-details">
                <div class="product-name">{{ scope.row.product.name }}</div>
                <div class="product-category">{{ scope.row.product.categoryName }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column prop="product.price" label="单价" width="120">
          <template #default="scope">
            <span class="price">¥{{ scope.row.product.price }}</span>
          </template>
        </el-table-column>
        
        <el-table-column label="数量" width="150">
          <template #default="scope">
            <el-input-number
              v-model="scope.row.quantity"
              :min="1"
              :max="10"
              @change="handleQuantityChange(scope.row)"
            />
          </template>
        </el-table-column>
        
        <el-table-column label="小计" width="120">
          <template #default="scope">
            <span class="subtotal">¥{{ (scope.row.product.price * scope.row.quantity).toFixed(2) }}</span>
          </template>
        </el-table-column>
        
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button type="danger" text @click="removeFromCart(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 结算信息 -->
      <div class="cart-summary">
        <div class="summary-item">
          <span>商品总数:</span>
          <span>{{ totalItems }}</span>
        </div>
        <div class="summary-item">
          <span>总金额:</span>
          <span class="total-price">¥{{ totalPrice.toFixed(2) }}</span>
        </div>
        <el-button type="primary" size="large" @click="checkout">去结算</el-button>
      </div>
    </div>

    <!-- 空购物车 -->
    <div class="empty-cart" v-else>
      <el-empty description="购物车为空">
        <el-button type="primary" @click="$router.push('/front/shop')">去逛逛</el-button>
      </el-empty>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElTable, ElTableColumn, ElImage, ElButton, ElInputNumber, ElEmpty, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import useCartStore from '../../stores/cartStore'

const router = useRouter()
const cartStore = useCartStore()

// 购物车项目
const cartItems = computed(() => cartStore.getCartItems)

// 计算商品总数
const totalItems = computed(() => cartStore.getTotalItems)

// 计算总金额
const totalPrice = computed(() => cartStore.getTotalPrice)



// 处理数量变化
const handleQuantityChange = (item) => {
  cartStore.updateQuantity(item.id, item.quantity)
  ElMessage.success('商品数量已更新')
}

// 从购物车删除
const removeFromCart = (item) => {
  cartStore.removeFromCart(item.id)
  ElMessage.success('商品已从购物车移除')
}

// 去结算
const checkout = () => {
  if (cartItems.value.length === 0) {
    ElMessage.warning('购物车为空，请先添加商品')
    return
  }
  
  // 这里应该跳转到结算页面
  router.push('/front/checkout')
}

onMounted(() => {
  // 购物车数据现在由状态管理自动处理
})
</script>

<style scoped>
.cart-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-title {
  font-size: 28px;
  color: #333;
  margin-bottom: 10px;
}

.page-subtitle {
  font-size: 16px;
  color: #666;
}

.product-info {
  display: flex;
  align-items: center;
}

.product-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  margin-right: 15px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.product-details {
  flex: 1;
}

.product-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.product-category {
  color: #999;
  font-size: 14px;
}

.price, .subtotal {
  font-weight: bold;
  color: #333;
}

.cart-summary {
  margin-top: 30px;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
}

.summary-item {
  display: flex;
  gap: 10px;
}

.image-error-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #bdc3c7;
  font-size: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.total-price {
  font-size: 20px;
  font-weight: bold;
  color: #ff6600;
}

.empty-cart {
  text-align: center;
  padding: 50px 0;
}
</style>